<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item label="用户ID">
          <a-input-search placeholder="请输入用户ID" style="width: 200px" @search="findUserById" />
        </el-form-item>
        <el-form-item label="用户账号">
          <a-input-search placeholder="请输入用户账号" style="width: 200px" @search="findUserByUsername" />
        </el-form-item>
        <el-form-item label="用户电子邮箱">
          <a-input-search placeholder="请输入用户电子邮箱" style="width: 200px" @search="findUserByEmail" />
        </el-form-item>
        <br />

        <el-button type="primary" @click="findAllUser">查找所有用户</el-button>

        <el-button type="primary" @click="findAllLocked">查找所有冻结用户</el-button>
      </el-form>
    </div>
    <br />
    <!-- 表格渲染 -->
    <el-table
      border
      :fit="true"
      ref="userList"
      max-height="700"
      style="width: 100%"
      :data="userList"
    >
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="u_id" label="用户ID"></el-table-column>
      <el-table-column prop="username" label="用户名" width="160"></el-table-column>
      <el-table-column prop="realname" label="用户昵称" width="160"></el-table-column>
      <el-table-column prop="email" label="电子邮箱"></el-table-column>
      <el-table-column prop="registerDate" label="注册日期"></el-table-column>
      <el-table-column prop="lastLogin" label="最后一次登陆日期"></el-table-column>
      <el-table-column prop="userstatus" label="用户状态" :formatter="accountNonLocked"></el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot="name" slot-scope="text, record">
          <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
        </template>

        <template slot-scope="scope">
          <el-button
            @click.native.prevent="LockRow(scope.$index,userList)"
            type="text"
            size="small"
          >锁定</el-button>
          <el-button
            @click.native.prevent="unLockRow(scope.$index, userList)"
            type="text"
            size="small"
          >解锁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-row class="page-row">
        <span class="demonstration">瑞豪酒店</span>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      totalCount: 0,
      currentPage: 1,
      userList: [],

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        name: undefined,
        startDate: this.getYesterday()
      },
      total: 0,
      pageSize: 20,
      currentPage: 1
    };
  },
  mounted() {},
  methods: {
    //锁定按钮触发事件
    LockRow(index, rows) {
      console.log(rows);
      var a = 0;
      var b = rows[index].username;
      this.$axios
        .post("ssms/admin/user/updateLocked", {
          u_id: a,
          username: b
        })
        .then(function(response) {
          console.log(response);
          if (response.data.code === 0) {
            rows[index].accountNonLocked = "0";
            accountNonLocked(row);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //解锁按钮触发事件
    unLockRow(index, rows) {
      var a = 1;
      var b = rows[index].username;
      this.$axios
        .post("ssms/admin/user/updateLocked", {
          u_id: a,
          username: b
        })
        .then(function(response) {
          console.log(response);
          if (response.data.code === 0) {
            rows[index].accountNonLocked = "1";
            accountNonLocked(row);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    findUserById(value) {
      this.totalCount = 1;
      this.userList = [];
      var a = parseInt(value);
      //localhost:8080/#/hotelManager/historyRecord
      http: this.$axios
        .get("ssms/admin/user/findUserById", {
          params: {
            u_id: value
          }
        })
        .then(response => {
          console.log(response);
          this.userList.push(response.data.obj);
          console.log(this.userList);
          this.$message(response.data.msg);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    findAllLocked(value) {
      this.userList = [];
      var a = parseInt(value);
      //localhost:8080/#/hotelManager/historyRecord
      http: this.$axios
        .get("ssms/admin/user/findAllLocked", {
          params: {}
        })
        .then(response => {
          console.log(response);
          this.userList = response.data.obj;
          this.totalCount = response.data.obj.length;
          this.$message(response.data.msg);
        })
        .catch(function(error) {
          console.log(error);
        });
      let vm = this;
    },
    findAllUser(value) {
      this.userList = [];
      var a = parseInt(value);
      //localhost:8080/#/hotelManager/historyRecord
      http: this.$axios
        .get("ssms/admin/user/findAllUser", {
          params: {
            currentPage: 1
          }
        })
        .then(response => {
          console.log(response);
          this.userList = response.data.obj.lists;
          this.totalCount = response.data.obj.totalCount;
          this.$message(response.data.msg);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    findUserByUsername(value) {
      this.userList = [];

      //localhost:8080/#/hotelManager/historyRecord
      http: this.$axios
        .get("ssms/admin/user/findUserByUsername", {
          params: {
            username: value
          }
        })
        .then(response => {
          console.log(response);
          this.userList.push(response.data.obj);
          this.$message(response.data.msg);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    findUserByEmail(value) {
      this.userList = [];

      //localhost:8080/#/hotelManager/historyRecord
      http: this.$axios
        .get("ssms/admin/user/findUserByEmail", {
          params: {
            email: value
          }
        })
        .then(response => {
          console.log(response);
          this.userList.push(response.data.obj);
          console.log(this.userList);
          this.$message(response.data.msg);
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    accountNonLocked(row) {
      // console.log(row);
      if (row.accountNonLocked == true) {
        row.userstatus = "正常";
        return row.userstatus;
      } else if (row.accountNonLocked == false) {
        row.userstatus = "锁定";
        return row.userstatus;
      } else {
        row.userstatus = "错误";
      }
    },

    getYesterday() {
      let day = new Date();
      day.setTime(day.getTime() - 24 * 60 * 60 * 1000);
      return (
        day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate()
      );
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.userList = [];
      //localhost:8080/#/hotelManager/historyRecord
      http: this.$axios
        .get("ssms/admin/user/findAllUser", {
          params: {
            currentPage: val
          }
        })
        .then(response => {
          console.log(response);
          this.userList = response.data.obj.lists;
          this.totalCount = response.data.obj.totalCount;
          console.log(this.userList);
          console.log(this.totalCount);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
function timeFormatter(millionSeconds) {
  var time = new Date(millionSeconds);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  return (
    y +
    "-" +
    add0(m) +
    "-" +
    add0(d) +
    " " +
    add0(h) +
    ":" +
    add0(mm) +
    ":" +
    add0(s)
  );
}
function add0(m) {
  return m < 10 ? "0" + m : m;
}
</script>

<style scoped>
@import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");
.page-row {
  text-align: right;
  margin-top: 5px;
}
</style>

